<template>
	<view class=" allhw"> 
		<view v-if="chatList.length>0">
			<!-- 	[{
				id:1,
				name:'波多野溪子',
				nickName:'波多野溪子',
				avatar:'https://cdn.quasar.dev/img/avatar.png',
				type:ImEnum.OtherEnum.USER_TYPE.USER,
				unReadCount :1,
				lastChatTime:'10:22',
				lastChatContent:"你好啊，傻逼",
			}] -->
			<block v-for="(item,index) in chatList" :key="index">
				<tui-swipe-action :actions="swipeActions" @click="deleteChat(index)">
					<template v-slot:content>
						<tui-list-cell :unlined="false" @click="detail(item)">
							<tui-badge
								absolute
								right="80vw"
								top="1vh"
								:scaleRatio="0.8" 
								type="danger"  v-if="item.unReadCount>0">{{item.unReadCount<= 99?item.unReadCount:"99+"}}</tui-badge>
							<view class="tui-chat-item ">
								<view class="tui-msg-box">
									<image :src="item.avatar" class="tui-msg-pic " radius mode="widthFix">
									</image>
									<view class="tui-msg-item">
										<view class="tui-msg-name">{{item.nickName}}</view>
										<view class="tui-msg-content text-cut">{{item.lastSender?item.lastSender+'：':''}}{{item.lastChatContent}}</view>
									</view>
								</view>
								<view class="tui-msg-right tui-right-dot" >
									<view class="tui-msg-time">{{item.lastChatTime}}</view>
								</view>
							</view>
						</tui-list-cell>
					</template>
				</tui-swipe-action>
			</block>
		</view>
		<!-- 没有会话 -->
		<tui-no-data class="im-nodata" @click='toContactFu' v-else imgUrl="/static/img/img_nodata.png" btnText="创建会话" btnColor='#4caf50'>暂无会话</tui-no-data>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import ImEnum from '../../../sdk/enums/index.js'
	export default {
		data() {
			return {
				chatType:ImEnum.OtherEnum.USER_TYPE.USER,
		
				swipeActions:[
					{
						name:'删除',
						color:'white',
						fontsize:'30rpx',
						width:'100',
						background:'red'
					}
				]
			}
		},
		computed: {
			chatList() { //获取会话列表
				return this.$store.getters.chatListGetter
			}
		},
		methods: {
			toContactFu() {
				uni.redirectTo({
					url: '/pages/contacts/contacts'
				});
			},
			detail(obj){
				uni.navigateTo({
					url: '/pages/inChat/inChat?userInfo='+encodeURIComponent(JSON.stringify(obj))
				});
			},
			deleteChat(obj){
				uni.showModal({
				    title: '提示',
				    content: '删除‘'+this.chatList[obj].nickName+'’？',
				    success: function (res) {
				        if (res.confirm) {
				           this.$store.dispatch("removeChat",obj)
						  uni.showToast({
						      duration: 1000
						  });
				        } else if (res.cancel) {
				        }
				    }
				});
			}
		}
	}
</script>

<style scoped>
	.im-nodata{
		position: absolute;
		z-index: 2;
		top: 50vh;
	}
	/*searchbox*/
	
	.tui-chat-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.tui-msg-box {
		display: flex;
		align-items: center;
	}
	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 30rpx;
		line-height: 1;
		color: #262b3a;
	}
	
	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 25rpx;
		line-height: 1;
		color: #9397a4;
	}
	
	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.tui-msg-right.tui-right-dot {
		height: 76rpx;
		padding-bottom: 10rpx;
	
	}
	
	.tui-msg-time {
		width: 100%;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #9397a4;
	}
</style>
